<template>
	<view class="order-goods ss-p-y-30 ss-p-x-20">
		<view class="store ss-flex justify-start align-center">
			<view class="store-left ss-flex align-end">
				<view class="ss-flex align-center" @click="sheep.$router.go('/pages/merchant/info', {
                      id:data.store.id,
                    })">
					<image class="store-logo" :src="data.store.thumb" mode="aspectFill"></image>
					<view class="store-name ss-m-x-10 ss-line-1 flex-sub">{{data.store.name}}</view>
				</view>
				<uni-icons type="right" size="16" color="#494949"></uni-icons>
			</view>
		</view>
		<view class="goods ss-flex ss-m-t-30">
			<image class="goods-logo ss-m-r-20" :src="sheep.$url.cdn(data.goods_image)" mode="aspectFill"></image>
			<view class="goods-details">
				<view class="details-t ss-flex justify-between align-center">
					<view style="max-width: 400rpx;" class="ss-line-1">{{data.goods_title}}</view>
					<view style="font-size: 24rpx;color: #797979;">￥{{data.goods_price}}</view>
				</view>
				<view class="details-c ss-flex justify-between align-center ss-m-t-5">
					<view class="num">随时退·过期退</view>
					<view class="num">x{{data.goods_num}}</view>
				</view>
			</view>
		</view>
		<view v-if="showElement">
			<view class="qrcode-list ss-flex justify-between align-center ss-m-t-30" v-if="codeList.length >= 1">
				<view class="qrcode-list-left" @click="left"></view>
				<swiper class="qrcode-swiper" @change="swiperChange" :disable-touch="true" :current="state.current">
					<swiper-item v-for="(item,index) in codeList" :key="index">
						<image class="qrcode-swiper-image" :src="item.image" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="qrcode-list-right" @click="right"></view>
			</view>
			<view class="qrcode-list-length ss-m-t-20" v-if="codeList.length >= 1">{{state.current + 1}}/{{codeList.length}}</view>
		</view>
		<!-- 交易关闭和未支付不显示 -->
		<view class="qrcode ss-p-t-32 ss-p-b-30 ss-m-t-30" v-if="showElement">
			<view class="ss-flex justify-between align-center">
				<view class="title" v-show="data.ticket.validity_time">待使用
					<text>{{format(data.ticket.validity_time)}}到期</text></view>
				<view class="check-code-right" @click="refund" v-if="data.btns.includes('aftersale')">申请退款</view>
				<view class="check-code-right" @click="sheep.$router.go('/pages/order/aftersale/detail', {
                      id: data.ext.aftersale_id,
                    })" v-if="data.btns.includes('aftersale_info')">售后详情</view>
				<view class="check-code-right" @click="refund" v-if="data.btns.includes('re_aftersale')">申请售后</view>
			</view>
			<view class="check-code ss-flex justify-between align-start">
				<view class="check-code-left">
					<view class="code ss-m-t-16" :class="[item.status === 1 ? 'text-line' : '']"
						v-for="(item,index) in data.ticket.code" :key="index">{{item.code}}</view>
				</view>
			</view>
		</view>
		<!-- 交易关闭和未支付不显示 -->
		<view class="refund ss-flex justify-between align-center ss-p-t-30" v-if="showElement">
			<view class="refund-left ss-flex">
				<view class="refund-left-item ss-m-r-30">已使用（{{data.ticket.use_num}}）</view>
				<view class="refund-left-item">已退款（{{data.ticket.refund_num}}）</view>
			</view>
			<view class="refund-right">
				<view class="go-info ss-flex justify-end align-center" @click="open">
					<view class="go-text" style="color: #B2B2B2;">查看详情</view>
					<uni-icons type="right" size="16" color="#B2B2B2"></uni-icons>
				</view>
			</view>
		</view>
	</view>
	<!-- 退款/使用记录 -->
	<refundList :show="state.show" :list="props.data.ticket.code" :name="props.data.store.name" @close="close">
	</refundList>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import refundList from './refund-list.vue'

	const props = defineProps({
		data: {
			type: Object,
			default: {}
		}
	})

	const codeList = computed(() => {
		if (props.data?.ticket.code.length >= 1) {
			return props.data?.ticket.code.filter(item => {
				return item.status === 0
			})
		}
		return false
	})
	
	const showElement = computed(()=>{
		if (props.data?.status_code !== 'unpaid' && props.data?.status_code !== 'cancel' && props.data
			?.status_code !== 'closed' && props.data?.status_code !== 'refund_agree') {
			return true
		}
		return false
	})

	const state = reactive({
		show: false,
		current:0
	})
	
	const swiperChange = (e) => {
		state.current = e.detail.current
	}
	
	const left = () => {
		if (state.current === 0) {
			return 
		}
		state.current--
	}
	
	const right = () => {
		if (state.current >= codeList.value.length - 1) {
			return 
		}
		state.current++
	}

	const close = () => {
		state.show = false
	}

	const open = () => {
		state.show = true
	}

	const refund = () => {
		sheep.$router.go('/pages/order/aftersale/apply', {
			item: JSON.stringify(props.data),
		})
	}

	const format = (timestamp) => {
		if (!timestamp) {
			return ''
		}
		return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.order-goods {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;

		.store {
			.store-logo {
				width: 32rpx;
				height: 32rpx;
				border-radius: 8rpx;
			}

			.store-name {
				font-weight: 500;
				font-size: 32rpx;
				color: #343434;
			}
		}

		.goods {
			.goods-logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}

			.goods-details {
				flex: 1;
				height: 120rpx;

				.details-t {
					font-weight: 500;
					font-size: 28rpx;
					color: #2A2A2A;
				}

				.details-c {
					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #9A9A9A;
						text-align: right;
					}
				}
			}
		}

		.qrcode {
			border-top: 1rpx dashed #E3E3E3;

			.qrcode-image {
				width: 254rpx;
				height: 254rpx;
				background-color: #E6E6E6;
				margin: 0 auto;
			}

			.title {
				font-weight: 400;
				font-size: 28rpx;
				color: #282828;

				text {
					font-size: 22rpx;
					color: #787878;
				}
			}

			.check-code-right {
				width: 140rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 2rpx solid #E4E4E4;
				font-weight: 400;
				font-size: 24rpx;
				color: #5C5C5C;
				line-height: 52rpx;
				text-align: center;
			}

			.check-code {

				.check-code-left {


					.code {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
				}


			}
		}

		.refund {
			border-top: 1rpx dashed #E3E3E3;

			.refund-left {
				.refund-left-item {
					font-weight: 400;
					font-size: 24rpx;
					color: #282828;
				}
			}
		}
	}

	.text-line {
		text-decoration-line: line-through;
	}


	.qrcode-list {
		border-top: 1rpx dashed #E3E3E3;
		padding: 30rpx 84rpx 0;

		.qrcode-list-left {
			width: 50rpx;
			height: 50rpx;
			background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/group/qrcode-left.png');
			background-size: cover;
		}
		
		.qrcode-swiper {
			width: 260rpx;
			height: 260rpx;
			
			.qrcode-swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.qrcode-list-right {
			width: 50rpx;
			height: 50rpx;
			background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/group/qrcode-right.png');
			background-size: cover;
		}
	}
	
	.qrcode-list-length {
		font-weight: 400;
		font-size: 24rpx;
		color: #3D3D3D;
		text-align: center;
	}
</style>